<template>
  <div class="header_main">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="logo">
          <el-link href="javascript:void(0);"> 物联网创新实训平台</el-link>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="menu-content">
          <ul
            v-for="(item, index) in menu_content"
            :key="index"
            @click="navTo(item.value)"
            :title="item.name"
          >
            {{
              item.name
            }}
          </ul>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="menu-content">
          <!-- <ul class="language">
            <el-dropdown>
              <span class="el-dropdown-link">
                简体中文
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>English</el-dropdown-item>
                  <el-dropdown-item>German</el-dropdown-item>
                  <el-dropdown-item>Japanese</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </ul> -->
          <ul class="login" v-show="!getState" @click="DialogVisible = true">
            登录
          </ul>
          <ul v-show="getState">
            <el-dropdown>
              <span class="el-dropdown-link" style="font-size: 16px">
                {{ getUserName }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="personalInfor()"
                    >个人空间</el-dropdown-item
                  >
                  <el-dropdown-item @click="quit()">后台管理</el-dropdown-item>
                  <el-dropdown-item @click="quit()">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </ul>
        </div>
      </el-col>
    </el-row>

    <!-- 登录 -->
    <el-dialog v-model="DialogVisible" width="30%" draggable title="登录">
      <el-card>
        <el-form :model="userForm" ref="loginFormRef">
          <el-form-item
            label="账号"
            prop="tel"
            :rules="[
              { required: true, message: '请输入合法账号', trigger: 'blur' },
              {
                min: 3,
                max: 20,
                message: '长度在3到20个字符',
                trigger: 'blur',
              },
            ]"
          >
            <!-- 图标可以插入 -->
            <el-input v-model="userForm.tel" placeholder="请输入账号或手机号" />
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            :rules="[
              { required: true, message: '请输入合法密码', trigger: 'blur' },
              {
                min: 3,
                max: 20,
                message: '长度在 3 到 20 个字符',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              type="password"
              v-model="userForm.password"
              placeholder="请输入密码"
              @keyup.enter.native="login()"
            />
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-row>
            <el-col :span="8">
              <el-button text @click="forgetPassword()"
                >忘记密码</el-button
              ></el-col
            >
            <el-col :span="8">
              <el-button type="info" round @click="goRegister()">注册</el-button
              ><el-button type="primary" @click="login()" round>登录</el-button>
            </el-col>
            <el-col :span="8">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  其他登录方式<el-icon class="el-icon--right"
                    ><arrow-down
                  /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="a"
                      >手机验证登录</el-dropdown-item
                    >
                    <el-dropdown-item command="b"
                      >邮箱验证登录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-dialog>
    <!-- 手机登录弹出框 -->
    <login-by-phone
      :diagVisable="childDiag1"
      @childsolt="callback1"
    ></login-by-phone>
    <!-- 邮箱验证登录 -->
    <login-by-email
      :diagVisable="childDiag2"
      @childsolt="callback2"
    ></login-by-email>
    <forget-password
      :diagVisable="childDiag3"
      @childsolt="callback3"
    ></forget-password>
    <!-- 注册弹出框 -->
    <el-dialog
      title="注册"
      v-model="registerDialogVisible"
      width="40%"
      center
      @close="registerClose"
    >
      <div class="registerBox">
        <!-- 顶部过程条 -->
        <div class="re-header">
          <el-steps :active="activeValue" finish-status="success" align-center>
            <el-step title="协议须知" />
            <el-step title="注册" />
            <el-step title="完善信息" />
          </el-steps>
        </div>
        <div class="re-main">
          <div v-show="activeValue == '0'">
            <p class="text" v-html="protocol"></p>
          </div>
          <div v-show="activeValue == '1'">
            <el-form
              ref="registerFormRef"
              :model="registerForm"
              label-width="120px"
              class="register"
            >
              <el-form-item
                label="手机号"
                class="registerItem"
                prop="tel"
                :rules="[
                  {
                    required: true,
                    message: 'Please input telephone number',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  class="reItem-input"
                  v-model="registerForm.tel"
                  type="text"
                  autocomplete="off"
                  clearable
                  size="large"
                  maxlength="11"
                  show-word-limit
                  @blur="bindPhoneInput(registerForm.tel)"
                />
              </el-form-item>
              <el-form-item
                label="邮箱号"
                class="registerItem"
                prop="email"
                :rules="[
                  {
                    required: true,
                    message: 'Please input email number',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  class="reItem-input"
                  v-model="registerForm.email"
                  type="text"
                  autocomplete="off"
                  clearable
                  size="large"
                  @blur="bindPhoneInput(registerForm.tel)"
                />
              </el-form-item>
              <el-form-item
                label="验证码"
                class="registerItem"
                prop="captcha"
                :rules="[
                  {
                    required: true,
                    message: 'Please input captcha ',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  class="reItem-input"
                  size="large"
                  v-model="registerForm.captcha"
                />
                <el-button
                  v-if="btnHidden"
                  class="qwe"
                  type="primary"
                  @click="getCaptcha"
                  :disabled="btnDisable"
                  >{{ btnValue }}</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div v-show="activeValue == '2'">
            <el-form
              ref="passform"
              :model="passform"
              :rules="passrules"
              label-width="80px"
              class="passform"
            >
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="passform.password"
                  type="password"
                  placeholder="请设置6~12位密码"
                />
              </el-form-item>
              <el-form-item label="确认密码" prop="checkpassword">
                <el-input
                  v-model="passform.checkpassword"
                  id="inputValue"
                  type="password"
                  placeholder="请再次输入密码"
                />
              </el-form-item>
              <el-form-item label="密码强度" class="strong">
                <el-row style="height: 20px">
                  <div class="input_span">
                    <span id="one"></span>
                    <span id="two"></span>
                    <span id="three"></span>
                  </div>
                </el-row>
                <el-row style="height: 20px">
                  <span id="font">弱</span>
                  <span id="font">中</span>
                  <span id="font">强</span>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
          <!-- 中部每一条对应的内容 -->
        </div>
        <div class="re-footer">
          <!-- 底部对应着相应操作 -->
          <div class="bt-footer">
            <el-button
              v-if="activeValue > 0"
              type="primary"
              size="large"
              @click="prev"
              >上一步</el-button
            >
            <el-button
              v-if="activeValue == ' 0'"
              size="large"
              type="primary"
              @click="next"
              >同意协议并注册</el-button
            >
            <el-button
              v-if="activeValue == 1"
              type="success"
              size="large"
              @click="register"
              >注册</el-button
            >
            <el-button
              v-if="activeValue < steps - 1 && activeValue > 1"
              type="success"
              size="large"
              @click="next"
              >下一步</el-button
            >
            <el-button
              v-if="activeValue == 2"
              type="success"
              size="large"
              @click="submit"
              >提交</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 验证滑块 -->
    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
  </div>
</template>

<script>
import { reactive, ref, inject } from "vue";
import { mapGetters, mapMutations, useStore } from "vuex";
import Vcode from "vue3-puzzle-vcode";
import { ArrowDown } from "@element-plus/icons-vue";
import { login, userRegister, generate, verification } from "../api/user.js";
import { getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import loginByPhone from "@/components/myComponent/loginComponent/loginByPhone.vue";
import loginByEmail from "@/components/myComponent/loginComponent/loginByEmail.vue";
import forgetPassword from "@/components/myComponent/forgetPassword/index.vue";
export default {
  components: {
    Vcode,
    ArrowDown,
    loginByPhone,
    loginByEmail,
    forgetPassword,
  },
  setup() {
    const router = useRouter();
    const notice = inject("notice");
    const { proxy } = getCurrentInstance();
    const store = useStore(); // 使用useStore方法
    const isShow = ref(false);
    // 登录表单
    const userForm = reactive({
      tel: "",
      password: "",
    });
    const info = reactive({
      username: "",
      pic: "",
    });
    const onShow = () => {
      isShow.value = true;
    };
    const eraseForm = () => {
      userForm.tel = "";
      userForm.password = "";
    };
    const onClose = () => {
      isShow.value = false;
    };
    const soltLogin = (Form) => {
      login(Form).then((res) => {
        // 登录失败
        if (res.code != "200") {
          // 后面可以把登录失败后调用擦除表单数据函数
          userForm.tel = "";
          userForm.password = "";
          ElMessage({
            message: "账号或密码错误，登录失败",
            type: "error",
          });
        }
        // 登陆成功
        if (res.code == "200") {
          console.log(res);
          userForm.tel = "";
          userForm.password = "";
          let token = res.data.token;
          store.commit("setUserMessage", res.data.user);
          info.username = res.data.user.username;
          info.pic = res.data.user.picture;
          window.sessionStorage.setItem("token", token);
          if (res.data.role == "admin") {
            router.push({
              path:"/admin/userManage"
            })
          } else {
            router.push({
              path: "/space",
            });
          }
          ElMessage({
            message: "欢迎回来!",
            type: "success",
          });
        }
      });
    };
    const onSuccess = () => {
      onClose(); // 验证成功，需要手动关闭模态框
      //  成功之后还是需要对登录执行API操作
      soltLogin(userForm);
    };
    //注册
    const registerForm = reactive({
      tel: "", //手机号
      email: "",
      captcha: "", //验证码
    });
    const btnValue = ref("获取验证码");
    let btnHidden = ref(false);
    let btnDisable = ref(false);
    let totalTime = 60;
    let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
    let emailReg =
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    const bindPhoneInput = () => {
      if (registerForm.tel != "" && registerForm.email != "") {
        btnHidden.value = true;
        btnValue.value = "获取验证码";
      } else {
        btnHidden.value = false;
      }
    };
    const getCaptcha = () => {
      if (!phoneReg.test(registerForm.tel)) {
        ElMessage({
          showClose: true,
          message: "手机号码非法，请重新输入",
          type: "error",
        });
        return;
      }
      if (!emailReg.test(registerForm.email)) {
        ElMessage({
          showClose: true,
          message: "邮箱号码非法，请重新输入",
          type: "error",
        });
        return;
      }
      if (!btnDisable) return;
      btnDisable.value = true;
      btnValue.value = totalTime + "s后重新发送";
      let clock = window.setInterval(() => {
        totalTime--;
        btnValue.value = totalTime + "s后重新发送";
        if (totalTime < 0) {
          window.clearInterval(clock);
          btnValue.value = "重新发送验证码";
          totalTime = 60;
          btnDisable.value = false;
        }
      }, 1000);
      generate(registerForm.tel, registerForm.email).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: "发送成功",
          });
        } else {
          ElMessage({
            type: "info",
            message: "发送失败",
          });
        }
      });
    };
    return {
      isShow,
      info,
      userForm,
      registerForm,
      btnHidden,
      btnValue,
      btnDisable,
      phoneReg,
      onShow,
      onClose,
      onSuccess,
      soltLogin,
      eraseForm,
      bindPhoneInput,
      getCaptcha,
      notice,
    };
  },
  // 数据源
  data() {
    return {
      menu_content: [
        // {
        //   name: "首页",
        //   value: "/home",
        // },
        // {
        //   name: "广场",
        //   value: "/user/home",
        // },
        // {
        //   name: "课程",
        //   value: "/space",
        // },
        // {
        //   name: "文档",
        //   value: "document",
        // },
        // {
        //   name: "关于",
        //   value: "关于地址",
        // },
        // {
        //   name: "加入",
        //   value: "加入地址",
        // },
      ],
      DialogVisible: false,
      registerDialogVisible: false,
      activeValue: 0,
      steps: 3,
      protocol: `<div class="detail_article">
                            <p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>尊敬的客户，欢迎您注册成为本网站用户。在注册前请您仔细阅读如下服务条款：</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本服务协议双方为本网站与本网站客户，本服务协议具有合同效力。您确认本服务协议后，本服务协议即在您和本网站之间产生法律效力。请您务必在注册之前认真阅读全部服务协议内容，如有任何疑问，可向本网站咨询。 无论您事实上是否在注册之前认真阅读了本服务协议，只要您点击协议正本下方的"注册"按钮并按照本网站注册程序成功注册为用户，您的行为仍然表示您同意并签署了本服务协议。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">协议细则</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>1、本网站服务条款的确认和接纳</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站各项服务的所有权和运作权归本网站拥有。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>2、用户必须：</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(1)自行配备上网的所需设备， 包括个人电脑、调制解调器或其他必备上网装置。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(2)自行负担个人上网所支付的与此服务有关的电话费用、 网络费用。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>3、用户在本网站平台上不得发布下列违法信息：</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(1)反对宪法所确定的基本原则的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(3)损害国家荣誉和利益的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(4)煽动民族仇恨、民族歧视，破坏民族团结的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(5)破坏国家宗教政策，宣扬邪教和封建迷信的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(6)散布谣言，扰乱社会秩序，破坏社会稳定的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(7)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(8)侮辱或者诽谤他人，侵害他人合法权益的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(9)含有法律、行政法规禁止的其他内容的。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>4、有关个人资料</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户同意：</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(1)&nbsp;提供及时、详尽及准确的个人资料。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(2).&nbsp;同意接收来自本网站的信息。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(3)&nbsp;不断更新注册资料，符合及时、详尽准确的要求。所有原始键入的资料将引用为注册资料。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>5、电子邮件</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户在注册时应当选择稳定性及安全性相对较好的电子邮箱，并且同意接受并阅读本网站发往用户的各类电子邮件。如用户未及时从自己的电子邮箱接受电子邮件或因用户电子邮箱或用户电子邮件接收及阅读程序本身的问题使电子邮件无法正常接收或阅读的，只要本网站成功发送了电子邮件，应当视为用户已经接收到相关的电子邮件。电子邮件在发信服务器上所记录的发出时间视为送达时间。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>6、服务条款的修改</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站有权在必要时修改服务条款，本网站服务条款一旦发生变动，将会在重要页面上提示修改内容。如果不同意所改动的内容，用户可以主动取消获得的本网站信息服务。如果用户继续享用本网站信息服务，则视为接受服务条款的变动。本网站保留随时修改或中断服务而不需通知用户的权利。本网站行使修改或中断服务的权利，不需对用户或第三方负责。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>7、用户的帐号、密码和安全性</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">你一旦注册成功成为用户，你将得到一个密码和帐号。如果你不保管好自己的帐号和密码安全，将负全部责任。另外，每个用户都要对其帐户中的所有活动和事件负全责。你可随时根据指示改变你的密码，也可以结束旧的帐户重开一个新帐户。用户同意若发现任何非法使用用户帐号或安全漏洞的情况，请立即通知本网站。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>8、拒绝提供担保</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户明确同意信息服务的使用由用户个人承担风险。本网站不担保服务不会受中断，对服务的及时性，安全性，出错发生都不作担保，但会在能力范围内，避免出错。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>9、有限责任</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站对任何直接、间接、偶然、特殊及继起的损害不负责任，这些损害来自：不正当使用本网站服务，或用户传送的信息不符合规定等。这些行为都有可能导致本网站形象受损，所以本网站事先提出这种损害的可能性，同时会尽量避免这种损害的发生。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>10、信息的储存及限制</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站有判定用户的行为是否符合本网站服务条款的要求和精神的权利，如果用户违背本网站服务条款的规定，本网站有权中断其服务的帐号。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>11、用户管理</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户必须遵循：</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(1) 不使用信息服务作非法用途。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(2)&nbsp;不干扰或混乱网络服务。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(3)&nbsp;遵守所有使用服务的网络协议、规定、程序和惯例。用户的行为准则是以因特网法规，政策、程序和惯例为根据的。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>12、保障</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户同意保障和维护本网站全体成员的利益，负责支付由用户使用超出服务范围引起的律师费用，违反服务条款的损害补偿费用，其它人使用用户的电脑、帐号和其它知识产权的追索费。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>13、结束服务</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户或本网站可随时根据实际情况中断一项或多项服务。本网站不需对任何个人或第三方负责而随时中断服务。用户若反对任何服务条款的建议或对后来的条款修改有异议，或对本网站服务不满，用户可以行使如下权利：</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(1)&nbsp;不再使用本网站信息服务。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(2)&nbsp;通知本网站停止对该用户的服务。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">结束用户服务后，用户使用本网站服务的权利马上中止。从那时起，用户没有权利、本网站也没有义务传送任何未处理的信息或未完成的服务给用户或第三方。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>14、通告</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">所有发给用户的通告都可通过重要页面的公告或电子邮件或常规的信件传送。服务条款的修改、服务变更、或其它重要事件的通告都会以此形式进行。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>15、信息内容的所有权</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站定义的信息内容包括：文字、软件、声音、相片、录象、图表；在广告中全部内容；本网站为用户提供的其它信息。所有这些内容受版权、商标、标签和其它财产所有权法律的保护。所以，用户只能在本网站和广告商授权下才能使用这些内容，而不能擅自复制、再造这些内容、或创造与内容有关的派生产品。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>16、法律</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站信息服务条款要与中华人民共和国的法律解释一致。用户和本网站一致同意服从本网站所在地有管辖权的法院管辖。</p><p><br></p>
                 </div>`,
      msgText: "",
      passform: {
        password: "",
        checkpassword: "",
      },
      passrules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            max: 12,
            min: 6,
            message: "密码至少为6位，最多为12位",
            trigger: "blur",
          },
        ],
        checkpassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
        ],
      },
      childDiag1: false,
      childDiag2: false,
      childDiag3: false,
    };
  },
  //生命周期函数---
  mounted() {
  },
  watch: {
    "passform.password": {
      handler(newname, oldname) {
        this.msgText = this.checkStrong(newname);
        if (this.msgText > 1 || this.msgText == 1) {
          document.getElementById("one").style.background = "red";
        } else {
          document.getElementById("one").style.background = "#eee";
        }
        if (this.msgText > 2 || this.msgText == 2) {
          document.getElementById("two").style.background = "orange";
        } else {
          document.getElementById("two").style.background = "#eee";
        }
        if (this.msgText == 4) {
          document.getElementById("three").style.background = "#00D1B2";
        } else {
          document.getElementById("three").style.background = "#eee";
        }
      },
    },
  },
  //基本方法
  methods: {
    ...mapMutations({
      changeOffOnline: "changeOffOnline",
    }),
    quit() {
      ElMessage({
        type: "success",
        message: "拜拜",
      });
      window.sessionStorage.removeItem("token");
      window.sessionStorage.removeItem("store");
      this.changeOffOnline();
    },
    login() {
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
        this.DialogVisible = false;
        this.isShow = true;
      });
    },
    //开启注册
    goRegister() {
      this.DialogVisible = false;
      this.registerDialogVisible = true;
    },
    // 提交注册验证
    register() {
      this.$refs.registerFormRef.validate((valid) => {
        if (!valid) return;
        if (!this.phoneReg.test(this.registerForm.tel)) {
          ElMessage({
            showClose: true,
            message: "手机号码非法，请重新输入",
            type: "error",
          });
          return;
        }
        let emailReg =
          /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if (!emailReg.test(this.registerForm.email)) {
          ElMessage({
            showClose: true,
            message: "邮箱号非法，请重新输入",
            type: "error",
          });
          return;
        }
        //开始注册请求，根据反馈回来的内容进行给出相应提示，
        //1、手机号验证是否已经注册过了、2、对应验证码是否正确
        //3、都满足了 “注册成功进入下一页”

        this.next();
      });
    },
    prev() {
      this.activeValue--;
    },
    next() {
      this.activeValue++;
    },
    checkStrong(sValue) {
      var modes = 0;
      //正则表达式验证符合要求的
      if (sValue.length < 1) return modes;
      if (/\d/.test(sValue)) modes++; //数字
      if (/[a-z]/.test(sValue)) modes++; //小写
      if (/[A-Z]/.test(sValue)) modes++; //大写
      if (/\W/.test(sValue)) modes++; //特殊字符

      //逻辑处理
      switch (modes) {
        case 1:
          return 1;
          break;
        case 2:
          return 2;
          break;
        case 3:
        case 4:
          return sValue.length < 4 ? 3 : 4;
          break;
      }
      return modes;
    },
    isEqual() {
      if (this.passform.password === this.passform.checkpassword) return true;
      else return false;
    },
    submit() {
      this.$refs.passform.validate((valid) => {
        if (!valid) return;
        if (this.isEqual()) {
          let that = this;
          //设置成功 需要传递的参数 手机号+密码
          //自动登录
          let newUser = {
            academy: "",
            account: 0,
            birth: "",
            createTime: "",
            email: "",
            gender: "",
            id: "",
            identityId: "",
            integral: "",
            lastTime: "",
            password: "",
            picture: "",
            realName: "",
            role: "",
            school: "",
            tel: "",
            username: "",
          };
          newUser.tel = that.registerForm.tel;
          newUser.password = that.passform.password;
          newUser.email = that.registerForm.email;
          userRegister(newUser).then((res) => {
            if (res.code == 200) {
              ElMessage({
                type: "success",
                message: "注册成功",
              });
              that.userForm.tel = newUser.tel;
              that.userForm.password = newUser.password;
              that.soltLogin(that.userForm);
              that.notice(that);
            } else {
              ElMessage({
                type: "error",
                message: res.reason,
              });
            }
          });
          this.registerDialogVisible = false;
        } else {
          ElNotification({
            title: "错误提示",
            type: "warning",
            message: "两次输入密码不一致，请重新输入",
          });
        }
      });
    },
    personalInfor() {
      this.$router.push({
        path: "/space",
      });
    },
    // 注册完成后初始化表单信息
    registerClose() {
      this.$refs.passform.resetFields();
      this.registerForm.tel = "";
      this.registerForm.captcha = "";
      this.activeValue = 0;
    },
    //其他登录方式
    handleCommand(item) {
      this.DialogVisible = false;
      if (item == "a") {
        this.childDiag1 = true;
      } else if (item == "b") {
        this.childDiag2 = true;
      }
    },
    //忘记密码
    forgetPassword() {
      this.childDiag3 = true;
    },
    callback1() {
      console.log("callback1");
      this.childDiag1 = false;
    },
    callback2() {
      console.log("callback2");
      this.childDiag2 = false;
    },
    callback3() {
      console.log("callback3");
      this.childDiag3 = false;
    },
  },
  computed: {
    ...mapGetters(["getState", "getUserName"]),
  },
};
</script>

<style   scoped>
.header_main {
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(24, 34, 54, 0.8);
}
.el-row {
  width: 100%;
  height: 100%;
}
.el-col {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center;
}
.el-link::before {
  content: "";
  width: 50px;
  height: 35px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../assets/images/onlinelearing.png");
}

.el-link {
  font-size: 25px;
  color: aliceblue;
}

.menu-content {
  display: flex;
  justify-content: center;
  align-content: center;
}
.menu-content > ul {
  color: aliceblue;
  cursor: pointer;
}
.el-dropdown-link {
  font-size: 16px;
  cursor: pointer;
  color: aliceblue;
}
.registerBox {
  min-height: 400px;
}

.re-main {
  height: 300px;
}
.text {
  display: block;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid black;
  max-height: 250px;
  overflow-y: scroll;
}
.register {
  margin-top: 50px;
}
.registerItem {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #c0c0c0;
}
.reItem-input {
  width: 300px;
}
.qwe {
  margin-left: 20px;
  width: 100px;
}
.re-footer {
  position: relative;
  margin-left: 20px;

  height: 100px;
}
.bt-footer {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
}
.passform {
  margin-top: 50px;
}
.input_span {
  display: flex;
  border-radius: 50px;
  background: rgb(238, 238, 238);
}
#one {
  height: 20px;
  width: 120px;
}
#two {
  height: 20px;
  width: 120px;
}
#three {
  height: 20px;
  width: 120px;
}
#font {
  height: 18px;
  line-height: 18px;
  width: 120px;
  text-align: center;
}
a {
  cursor: pointer;
  text-decoration: none;
  color: #00c758;
  background-color: rgba(0, 0, 0, 0);
  transition: color 0.3s;
}
.u-pic {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}
.r-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-dropdown-link {
  cursor: pointer;
  color: rgb(18, 205, 230);
  display: flex;
  align-items: center;
  font-size: 12px;
}
</style>